<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body{
		background: #9bd29b;
	}
	*{
		padding: 0;
		margin: 0;
	}
	.chartBox{
		width: 1000px;
		height: 400px;
		border:1px solid #000;
		margin:50px auto;
	}
	</style>
</head>
<body>
	<div id="app">
		<chart-component :axisx='dataX' :linestyle="style">	
			<p slot="line" name="衬衫" type="line" :data="data1"></p>
			<p slot="line" name="羊毛衫" type="line" :data="data2"></p>
			<p slot="line" name="雪纺衫" type="line" :data="data3"></p>
		</chart-component>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<script src="slot2.js"></script>
<script>
	var color=['red','green','yellow'];
	var vm=new Vue({
		el:'#app',
		data:{
			data1:[1,2,3,4,5,6],
			data2:[4,5,3,6,8,1],
			data3:[5,7,8,3,2,6],
			dataX:[1,2,3,4,5,6,7],
			style:{
				lineColor:color
			}
		}
	})
</script>
</html>